<template>
    <div class="vipBg " v-if="isShow">
        <div class="vipMain">
            <div class="vip-contain">
                <div class="vipBox" v-for="(vip,index) in userVipList" :key="index"
                     :style="vipContainStyle(vip,index)" @touchend.stop="vipChoiceTouch(vip)">
                    <div class="vip-border" :style="vipBordrStyle(vip,index)" v-show="vip.isChoice"></div>
                    <div class="time" v-if="vip.vipTime">{{vip.vipTime}}天</div>
                </div>
            </div>
            <div class="vip_close" @touchend.stop="closeTouch"></div>
            <div class="vip-button" @touchend.stop="vipOpenTouch()" :style="vipButtonStyle"></div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapGetters} from "vuex"
    export default {
        data(){
            return{
                isShow: false,
                isBack: false,
                evaluateOpen: false,
            }
        },
        mounted() {
            if (this.userVip.isVip) {
                this.userVip.details.forEach(uItem =>{
                    this.userVipList.forEach(item => {
                        if (item.vipTypeCode === uItem.typeCode) {
                            this.$set(item, 'isActive', true)
                            const time = new Date(uItem.expireDateMs)
                            time.setDate(time.getDate() + 1)
                            let remainTime = (time - new Date())
                            let vipTime = parseInt(remainTime / 1000 / 60 / 60 / 24 , 10) //计算剩余的天数
                            this.$set(item, 'vipTime', vipTime)
                            if(this.userVipList[2].isActive){
                                this.evaluateOpen = true
                                this.$set(this.userVipList[2],'evaluateOpen',true)
                            }
                        }
                    })
                })
            }
        },
        computed:{
            vipContainStyle(vip,index){
                return function (vip,index) {
                    return{
                        left: index * 9 + 'rem',
                        background: vip.isActive ? "url(" + this.variable.STATICE_URLTITLE + "vip/" + vip.name + "-会员剩余.png)0 0 /100% 100% no-repeat"
                            : "url(" + this.variable.STATICE_URLTITLE + "vip/" + vip.name + "-未开通.png)0 0 /100% 100% no-repeat",
                        filter: this.evaluateOpen ? vip.evaluateOpen ? '' : 'grayscale(1)' : '',
                    }
                }
            },
            vipBordrStyle(vip,index){
                return function (vip,index) {
                    return{
                        background: "url(" + this.variable.STATICE_URLTITLE + "vip/" + vip.name + "-选中.png)0 0 /100% 100% no-repeat",
                    }
                }
            },
            //按钮样式
            vipButtonStyle(){
                const choiceCount = this.userVipList.filter((item)=>{return item.isChoice}).length,
                    activeCount = this.userVipList.filter((item)=>{return item.isActive}).length
                return{
                   filter: choiceCount > 0 ? '' : 'grayscale(1)',
                   background:activeCount>=1 && activeCount<=2 && this.userVipList[0].isActive && !this.userVipList[1].isActive && this.userVipList[1].isChoice ? "url(" + this.variable.STATICE_URLTITLE + "vip/8.8折.png)center center/contain no-repeat"
                       : activeCount===1 && this.userVipList[0].isActive && this.userVipList[2].isChoice ? "url(" + this.variable.STATICE_URLTITLE + "vip/6.8折.png)center center/contain no-repeat"
                       : activeCount>=1 && activeCount<=2 && !this.userVipList[2].isActive && this.userVipList[2].isChoice ? "url(" + this.variable.STATICE_URLTITLE + "vip/4.8折.png)center center/contain no-repeat"
                       : this.userVipList[0].isActive && this.userVipList[0].isChoice || this.userVipList[1].isActive && this.userVipList[1].isChoice || this.userVipList[2].isActive && this.userVipList[2].isChoice ?
                                   "url(" + this.variable.STATICE_URLTITLE + "vip/按钮-立即续费.png)center center/contain no-repeat" : ''
                }
            },
            ...mapGetters("personalStatus",{
                userVip: "getUserVip",
                userVipList: "getUserVipList",
                userRouter: "getUserRouter"
            }),
        },
        methods:{
            vipChoiceTouch(vip){
                this.userVipList.forEach(item=>{
                    if(item !== vip) this.$set(item,'isChoice',false)
                })
                if(this.evaluateOpen){
                    vip.evaluateOpen ? vip.isChoice? vip.isChoice = !vip.isChoice : this.$set(vip,'isChoice',true) : ''
                } else {
                    vip.isChoice? vip.isChoice = !vip.isChoice : this.$set(vip,'isChoice',true)
                }
            },
            vipShowTouch(){
                this.isShow = true
            },
            closeTouch(){
                this.isShow = false
                this.userVipList.forEach(item=>{
                    this.$set(item,'isChoice',false)
                })
                //是否返回上一级
                this.isBack ?
                this.setLoading({
                    callback: () => {
                        this.userRouter ? this.$router.push({ path:this.userRouter}) : this.$router.go(-1)
                    }
                }) : ''
                setTimeout(()=>{this.isBack = false},0)
            },
            vipOpenTouch(){
                WxpayFeature.payVip({
                    vipTypeCode: this.userVipList.filter(item =>{return item.isChoice})[0].vipTypeCode,
                    onPaid: (userVip) => {
                        userVip.details.forEach(uItem =>{
                            this.userVipList.forEach(item => {
                                if (item.vipTypeCode === uItem.typeCode) {
                                    this.$set(item, 'isActive', true)
                                    const time = new Date(uItem.expireDateMs)
                                    time.setDate(time.getDate() + 1)
                                    let remainTime = (time - new Date())
                                    let vipTime = parseInt(remainTime / 1000 / 60 / 60 / 24 , 10) //计算剩余的天数
                                    this.$set(item, 'vipTime', vipTime)
                                    if(item.vipTypeCode === 3){
                                        this.$set(item,'evaluateActive',true)
                                        this.evaluateOpen = true
                                        this.$set(this.userVipList[2],'evaluateOpen',true)
                                    }
                                }
                            })
                        })
                        this.setUserVipList(this.userVipList)
                        this.setUserVip(userVip)
                    },
                    onCanceled: () => {
                        // 取消
                    },
                    onError: () => {
                        // 网络异常
                    }
                });
            },
            //评测页面只能点击开通第三个
            vipEvaluateTouch(){
                this.evaluateOpen = true
                this.$set(this.userVipList[2],'evaluateOpen',true)
            },
            ...mapActions("personalStatus", ["setUserVip","setUserVipList"]),
            ...mapActions("mainStatus", ["setLoading"])
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../common/stylus/base.styl'
    .vipBg
        z-index 101
        position fixed
        left 0
        top 0
        width 100%
        height 100%
        background rgba(0, 0, 0, 0.5)
        color rgb(250, 250, 250)
        pacity 0
        animation fadeIn 1s
        animation-fill-mode forwards
        .vipMain
            position absolute
            $center('WHLT',32rem,18rem)
            background url($urlTitle + 'vip/开通会员背景.png')center center/contain no-repeat
        .vip-contain
            position absolute
            $center('WHLT',27rem,9rem)
            .vipBox
                $coord('WHLT',8rem,9rem,0,0)
                .vip-border
                    $coord('WHRB',8rem,9rem,-0.1rem,0.1rem)
                .time
                    $coord('WHRB',8rem,1.5rem,1rem,0.5rem)
                    font-size 4vh
                    color white
                    text-align right
                    line-height 1.5rem
                    font-weight 300
        .vip_close
            position absolute
            $coord('WHRT',1.5rem,1.5rem,2rem,1rem)
            background url($urlTitle + 'vip/关闭图标.png') 0 0 / 100% 100%
        .vip-button
            position absolute
            $center('WHLT',5rem,2rem)
            top 87%
            background url($urlTitle + 'vip/按钮-立即开通.png') 0 0 / 100% 100%
</style>
